<template>
  <div class="chatlist">
    <ul class="chatmenu">
      <li
        class="sessionlist"
        v-for="(chat, key) in searchChatList"
        :class="{active: chat.id == selectChatId}"
        :key="key"
        @click="selectChat(chat.id), readMsg()"
      >
        <div class="list-left">
          <div class="unread" v-show="chat.msgNum > 0">{{chat.msgNum}}</div>
          <img :src="chat.user.img" alt class="avatar" />
        </div>
        <div class="list-right">
          <p class="name">{{chat.user.name}}</p>
          <span class="time" v-text="lastDate(chat.messages[chat.messages.length - 1])">20:00</span>
          <p class="lastmsg" v-html="lastMsg(chat.messages[chat.messages.length - 1])">hello 小灰灰</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState(["selectChatId"]),
    ...mapGetters(["searchChatList"])
  },
  methods: {
    ...mapActions(["selectChat", "readMsg"]),
    lastDate(message) {
      let date;
      if (!message) {
        date = new Date();
      } else {
        date = message.date;
      }

      if (typeof date === "string") {
        date = new Date(date);
      }
      if (date.getMinutes() < 10) {
        return date.getHours() + ":0" + date.getMinutes();
      } else {
        return date.getHours() + ":" + date.getMinutes();
      }
    },
    lastMsg(message) {
      let content;
      if (!message) {
        content = "";
      } else {
        content = message.content;
        if (content.includes("width: 24px; height: 24px;")) {
          content = content.replace(
            /width: 24px; height: 24px;/g,
            "width: 15px; height: 15px;"
          );
        }
      }
      return content;
    }
  }
};
</script>

<style scoped>
.chatlist {
  height: 540px;
  overflow-y: auto;
}

.sessionlist {
  display: flex;
  height: 42px;
  padding: 12px;
  transition: background-color 0.1s;
  font-size: 0;
  cursor: default;
}

.sessionlist:hover {
  background-color: rgb(220, 220, 220);
}

.active {
  background-color: #c4c4c4;
}

.list-left {
  position: relative;
}

.unread {
  position: absolute;
  right: 5px;
  top: -9px;
  padding: 5px 4px;
  font-size: 10px;
  color: #fff;
  border-radius: 10px;
  background-color: red;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  margin-right: 12px;
}

.list-right {
  position: relative;
  flex: 1;
  margin-top: 4px;
}

.name {
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
}

.time {
  float: right;
  color: #999;
  font-size: 10px;
  vertical-align: top;
}

.lastmsg {
  position: absolute;
  font-size: 12px;
  width: 130px;
  height: 15px;
  line-height: 15px;
  color: #999;
  bottom: 0px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>